<template lang="html">
  <div id="pageBox">
    <div class="pageTitle">
      热门推荐
    </div>
    <div class="hotBox">
      <ul class="hotList clearfix">
        <li class="hotItem" v-for="(v,i) in hotList">
          <router-link :to="{path: '/details', query: {id: v.id}}">
            <div class="itemMain">
              <div class="imgBox">
                <img :src="v.coverImg" alt="">
              </div>
              <div class="mainTitle overflow2">
                {{ v.title }}
              </div>
              <div class="hotAndMoney clearfix">
                <span class="hot fl">{{ v.popularity }}人气</span>
                <span class="money fr">¥ {{ v.price }}</span>
              </div>
            </div>
          </router-link>
        </li>
      </ul>
      <div v-if="!lastPage" class="loadingMore" @click="more">
        查看更多
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:["hotList", "lastPage"],
  data(){
    return {

    }
  },
  methods:{
    more() {
      this.$emit('more')
    }
  }
}
</script>

<style lang="less" scoped>
  #pageBox{
    .pageTitle{
      font-size:0.16rem;
      font-weight: bold;
      margin:10px 0;
    }
    .hotBox{
      .hotList{
        .hotItem{
          float:left;
          width:50%;
          margin-bottom:20px;
          &:nth-child(even){
            padding-left:0.05rem;
          }
          &:nth-child(odd){
            padding-right:0.05rem;
          }
          .itemMain{
            border-radius: 5px;
            overflow: hidden;
            box-shadow: 0 0 14px 4px #dedede;
            .imgBox{
              width:100%;
              height:1rem;
              background:#999;
              img{
                width:100%;
                height: 100%;
                object-fit: cover;
              }
            }
            .mainTitle{
              padding:0.1rem 0.06rem;
              height:0.5rem;
              font-size:0.14rem;
              line-height: 0.2rem;
              font-weight: bold;
              color: #333;
            }
            .hotAndMoney{
              padding:0.1rem 0.06rem;
              line-height: 0.16rem;
              .hot{
                color:#999;
                font-size:0.12rem;
              }
              .money{
                color:red;
                font-size:0.15rem;
              }
            }
          }
        }
      }
    }
  }
</style>
